<template>
  <a-layout class="editor-header-layout">
    <a-layout-header>
      header
    </a-layout-header>
  </a-layout>
  <a-layout class="editor-main-layout">
    <!-- 左侧组件列表 -->
    <a-layout-sider>
      <div class="sidebar-container">
        《组件列表》
        <component-list :list="leftComponentListData" @on-item-click="addItem"></component-list>
      </div>
    </a-layout-sider>
    <!-- 中间画布区域 -->
    <a-layout class="editor-content-layout">
      <a-layout-content>
        <p>《画布区域》</p>
        <div class="preview-list" id="canvas-area">
          <edit-wrapper
            v-for="comp in components"
            :key="comp.id"
            :id="comp.id"
            @set-active="setActive"
            :active="editorStore.curActiveComponent?.id === comp.id"
          >
            <component
              :is="componentsMap[comp.name]"
              v-bind="comp.props"
            />
            <span class="del-comp" @click="deleteItem(comp)">删除</span>
          </edit-wrapper>
        </div>
      </a-layout-content>
    </a-layout>
    <!-- 右侧编辑组件属性 -->
    <a-layout-sider>
      《属性编辑》
      <props-table
        v-if="curActiveComponent?.props"
        :props="curActiveComponent.props"
        @change="handleChange"
      />
    </a-layout-sider>
  </a-layout>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEditorStore } from '@/stores/index'
import { type IComponentData } from '@/stores/editor'
import LText from '@/components/LText.vue'
import LImage from '@/components/LImage.vue'
import ComponentList from '@/components/ComponentList.vue'
import EditWrapper from '@/components/EditWrapper.vue'
import PropsTable from '@/components/PropsTable.vue'
import { leftComponentListData } from '@/leftComponentListData'
import { type ITextDefaultProps } from '@/defaultProps'

// 在Vue3的 <script setup> 中，动态组件 :is 必须直接绑定到 ​​组件实例​​，而不是字符串名称
const componentsMap: {[key:string]: unknown} = {
  'l-text': LText,
  'l-image': LImage
}
const editorStore = useEditorStore()
const components = computed(() => editorStore.components)
const curActiveComponent = computed(() => editorStore.curActiveComponent)

const addItem = (data: IComponentData) => {
  editorStore.addComponent(data)
}
const deleteItem = (comp:IComponentData) => {
  editorStore.deleteComponent(comp)
}
const setActive = (id:string) => {
  editorStore.setActive(id)
}

const handleChange = (obj:any) => {
  editorStore.updateComponent(obj);
}
</script>

<style lang="less" scoped>
.editor-header-layout {
  .ant-layout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.editor-main-layout {
  height: 600px;
  text-align: center;
  .ant-layout-sider {
    background-color: skyblue;
  }
}
.editor-content-layout {
  text-align: center;
  .del-comp {
    display: inline-block;
    padding: 2px;
    margin-left: 2px;
    font-size: 10px;
    color: red;
    cursor: pointer;
  }
}
</style>